<template>
    <div >
      <el-table
          :data="tableData"
          border
          style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item >
                <el-button type="text" @click="preview(props.row.id)" icon="el-icon-view">预览</el-button>
                <el-button type="text" @click="changepaper(props.row.id)" icon="el-icon-edit">修改</el-button>
                <el-button type="text" @click="deletepaper (props.row.id,index)" icon="el-icon-delete">删除</el-button>
                <el-button type="text" @click="totalpaper (props.row.id)" icon="el-icon-s-data">统计</el-button>
                <el-button type="text" @click="sharePaper(props.row.id)" icon="el-icon-share">分享</el-button>
                <el-button type="text" @click="correct(props.row.id)" icon="el-icon-check">批改</el-button>
                <!--                <div v-if="item.status">-->
                <!--                  <el-button type="primary" size="mini" @click="releaseStop(item.id,item.status,index)" plain>发布中</el-button>-->
                <!--                </div>-->
                <!--                <div v-else>-->
                <!--                  <el-button type="info" size="mini" @click="releaseStop(item.id,item.status,index)" plain>已停止</el-button>-->
                <!--                </div>-->

              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
            prop="title"
            label="试卷名">
        </el-table-column>
        <el-table-column
            l prop="creatTime"
            label="创建时间"
            width="400px">
        </el-table-column>
      </el-table>
      <el-pagination
          background
          layout="prev, pager, next"
          :page-size="pageSize"
          :total="total"
          @current-change="page">
      </el-pagination>
    </div>
</template>

<script>
export default {
  data() {
    return {
      total:null,
      pageSize:8,
      tableData: [],
    }
  },
  methods:{
    releaseStop(id, status,index) {
      var tishi="";
      if(status!=null && status){
        tishi="停止";
      }else{
        tishi="发布";
      }
      const _this = this
      this.$confirm('此操作将'+tishi+'试卷, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.put(_this.APIurl.apiUrl.domainName + 'examPaper/releaseOrStop/' +
            id).then(function(resp) {
          if(status==null){
            _this.tableData[index].status=true;
          }else{
            _this.tableData[index].status = !status;
          }

        })

        this.$message({
          type: 'success',
          message: '成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });

    },
    // 复制链接
    copyUrl() {
      const input = document.createElement("input");
      document.body.appendChild(input);
      input.setAttribute("value", this.linkText);
      input.select();
      if (document.execCommand("copy")) {
        document.execCommand("copy");
      }
      document.body.removeChild(input);
      this.$message({
        message: '已复制到剪切板',
        type: 'success'
      });
    },
    // 新标签页打开链接
    openUrl(url) {
      window.open(this.linkText, "_blank");
    },

    changepaper(id) {

      this.$router.push({
        path: "/creat",
        query: {
          id: id,
        }
      })
    },
    deletepaper(id, index) {
      const _this = this
      this.$confirm('此操作将永久删除该试卷, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.delete(_this.APIurl.apiUrl.domainName + 'examPaper/deleteById/' +
            id).then(function(resp) {
          _this.tableData.splice(index, 1);
        })

        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    preview(id) {
      this.$router.push({
        path: "/preview",
        query: {
          id: id,
        }
      })
    },
    totalpaper(id) {
      this.$router.push({
        path: "/dataShow",
        query: {
          id: id,
        }
      })
    },

    sharePaper(id) {
      this.linkShow = true;
      this.linkText = "http://localhost:8080/answer/" + id;
    },
    correct(id) {
      this.$router.push({
        path: "/checkAnswers",
        query: {
          id: id,
        }
      })
    },
    page(currentPage) {
      const _this = this
      let id2 = sessionStorage.getItem('id');

      axios.get(_this.APIurl.apiUrl.domainName + 'examPaper/findAllByUserId/' +
          id2 + '/' + currentPage + '/8').then(function(resp) {
        console.log(resp)
        _this.tableData = resp.data.data.content
        _this.total = resp.data.data.totalElements
      })
    }
  },
  created() {
    const _this = this;
    let id1 = sessionStorage.getItem('id');
    axios.get(_this.APIurl.apiUrl.domainName + 'examPaper/findAllByUserId/' + id1 + '/1/8').then(function(resp) {
      console.log(resp)
      _this.tableData = resp.data.data.content
      _this.total = resp.data.data.totalElements
    })
  }
}
</script>

<style scoped>

.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>

